<template>
  <div class="app-container">
    <div class="top">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" class="demo-ruleForm">
        <div class="input-row">
          <el-form-item label="订单编号" prop="memberId">
            <el-input v-model="ruleForm.memberId" placeholder="请输入订单编号" size="medium" />
          </el-form-item>
          <el-form-item label="订单状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择" size="medium">
              <el-option label="待取件" value="23000" />
              <el-option label="已取件" value="23002" />
              <el-option label="运输中" value="23005" />
              <el-option label="派送中" value="23008" />
              <el-option label="已签收" value="23009" />
              <el-option label="拒收" value="23010" />
              <el-option label="已取消" value="7" />
              <el-option label="全部" value="8" />
            </el-select>
          </el-form-item>
          <el-form-item label="付费状态" prop="paymentStatus" size="medium">
            <el-select v-model="ruleForm.paymentStatus" placeholder="请选择">
              <el-option label="未付" value="1" />
              <el-option label="已付" value="2" />
            </el-select>
          </el-form-item>
        </div>
        <div class="input-row">
          <el-form-item label="发件人姓名" prop="senderName">
            <el-input v-model="ruleForm.senderName" placeholder="请输入发件人姓名" size="medium" />
          </el-form-item>
          <el-form-item label="发件人电话" prop="senderPhone">
            <el-input v-model="ruleForm.senderPhone" placeholder="请输入发件人电话" size="medium" />
          </el-form-item>
          <el-form-item label="发件人地址" prop="senderAddress">
            <div class="input-dz">

              <el-select v-model="ruleForm.provinceId" placeholder="省" @change="getCity">
                <el-option v-for="item in provinceList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="ruleForm.cityId" placeholder="市" @change="getCounty">
                <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="ruleForm.countyId" placeholder="区">
                <el-option v-for="item in countyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

            </div>
          </el-form-item>
        </div>
        <div class="input-row">
          <el-form-item label="收件人姓名" prop="receiverName">
            <el-input v-model="ruleForm.receiverName" placeholder="请输入收件人姓名" size="medium" />
          </el-form-item>
          <el-form-item label="收件人电话" prop="receiverPhone">
            <el-input v-model="ruleForm.receiverPhone" placeholder="请输入收件人电话" size="medium" />
          </el-form-item>
          <el-form-item label="收件人地址" prop="receiverAddress">
            <div class="input-dz">

              <el-select v-model="ruleForm.provinceId1" placeholder="省" @change="getCity1">
                <el-option v-for="item in provinceList1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="ruleForm.cityId1" placeholder="市" @change="getCounty1">
                <el-option v-for="item in cityList1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select v-model="ruleForm.countyId1" placeholder="区">
                <el-option v-for="item in countyList1" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

            </div>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button v-model="ruleForm.keyword" type="primary" @click="seatch">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="conter">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          :index="indexMethod"
          label="序号"
          width="120"
          type="index"
        />
        <el-table-column
          prop="memberId"
          label="订单编号"
          width="120"
        /><el-table-column
          prop="orderCargoDTOS"
          label="运单编号"
          width="120"
        /><el-table-column
          prop="createTime"
          label="下单时间"
          width="120"
        /><el-table-column
          prop="status"
          label="订单状态"
          width="120"
        >
          <template v-slot="{ row }">
            <span v-if="row.status === 1">网点自寄</span>
            <span v-else-if="row.status === 2">上门取件</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderName"
          label="发件人姓名"
          width="120"
        /><el-table-column
          prop="senderPhone"
          label="发件人电话"
          width="120"
        /><el-table-column
          prop="senderAddress"
          label="发件人地址"
          width="120"
        /><el-table-column
          prop="receiverName"
          label="收件人姓名"
          width="120"
        /><el-table-column
          prop="receiverPhone"
          label="收件人电话"
          width="120"
        /><el-table-column
          prop="receiverAddress"
          label="收件人地址"
          width="120"
        />
        <el-table-column
          prop="pickupType"
          label="取件类型"
          width="120"
        >
          <template v-slot="{ row }">
            <span v-if="row.pickupType === 23009">待签收</span>
            <span v-else-if="row.pickupType === 23010">拒收</span>
            <span v-else-if="row.pickupType === 23002">已取件</span>
            <span v-else-if="row.pickupType === 23000">待取件</span>
            <span v-else-if="row.pickupType === 23005">运输中</span>
            <span v-else-if="row.pickupType === 23008">派送中</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentMethod"
          label="付费类型"
          width="120"
        >
          <template v-slot="{ row }">
            <span v-if="row.paymentMethod === 1">预结</span>
            <span v-else-if="row.paymentMethod === 2">到付</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentStatus"
          label="付费状态"
          width="120"
        >
          <template v-slot="{ row }">
            <span v-if="row.paymentStatus === 1">未付</span>
            <span v-else-if="row.paymentStatus === 2">已付</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot="{row}">
            <el-button type="text" size="medium" @click="$router.push(`/businessManagement/business-detail/${row.id}`)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="10"
      />
    </div>
  </div>
</template>
<script>
import { getAll, getBusiness } from '@/api/businessManagement'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      ruleForm: {
        provinceId: '',
        cityId: '',
        countyId: '',

        provinceId1: '',
        cityId1: '',
        countyId1: '',
        page: 1,
        pageSize: 10,
        keyword: '',
        receiverName: '', // 收件人姓名
        receiverPhone: '', // 收件人电话
        receiverProvince: '', // 收件人省份
        receiverCity: '', // 收件人城市
        receiverCounty: '', // 收件人区县
        receiverAddress: '', // 收件人地址
        senderName: '', // 发件人姓名
        senderPhone: '', // 发件人电话
        senderAddress: '', // 发件人地址
        senderProvince: '', // 发件人省份
        senderCity: '', // 发件人城市
        senderCounty: '', // 发件人区县
        status: '', // 订单状态
        paymentStatus: '' // 付款状态 1未付 2已付
      },
      provinceList: [],
      cityList: [],
      countyList: [],

      provinceList1: [],
      cityList1: [],
      countyList1: [],
      rules: {}
    }
  },
  async created() {
    this.getBusiness()
    const result = await getAll()
    this.provinceList = result
    this.provinceList1 = result
  },
  methods: {
    async getBusiness() {
      const res = await getBusiness(this.ruleForm)
      this.tableData = res.items
    },
    seatch() {
      this.getBusiness()
    },
    reset() {
      this.ruleForm.memberId = ''
      this.ruleForm.status = ''
      this.ruleForm.paymentStatus = ''
      this.ruleForm.senderName = ''
      this.ruleForm.senderPhone = ''
      this.ruleForm.provinceId = ''
      this.ruleForm.cityId = ''
      this.ruleForm.countyId = ''
      this.ruleForm.provinceId1 = ''
      this.ruleForm.cityId1 = ''
      this.ruleForm.countyId1 = ''
      this.ruleForm.receiverName = ''
      this.ruleForm.receiverPhone = ''
      this.getBusiness()
    },
    indexMethod(index) {
      return index + this.ruleForm.pageSize * (this.ruleForm.page - 1) + 1
    },
    carDetail(row) {
      this.$router.push({
        name: `/businessManagement/business-detail/`,
        params: {
          myObject: row
        }
      })
    },
    async getCity() {
      this.cityList = []
      this.countyList = []
      this.ruleForm.cityId = ''
      this.ruleForm.countyId = ''
      const result1 = await getAll(this.ruleForm.provinceId)
      this.cityList = result1
    },
    async getCounty() {
      this.countyList = []
      this.ruleForm.countyId = ''
      const result2 = await getAll(this.ruleForm.cityId)
      this.countyList = result2
    },
    async getCity1() {
      this.cityList1 = []
      this.countyList1 = []
      this.ruleForm.cityId1 = ''
      this.ruleForm.countyId1 = ''
      const result1 = await getAll(this.ruleForm.provinceId1)
      this.cityList1 = result1
    },
    async getCounty1() {
      this.countyList1 = []
      this.ruleForm.countyId1 = ''
      const result2 = await getAll(this.ruleForm.cityId1)
      this.countyList1 = result2
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
 background-color: #f4f6f8;
}
.top {
  background-color: #ffffff;
  padding: 10px;
  .input-row {
    display: flex;
    justify-content:space-evenly ;

    .input-dz {
      display: flex;
      justify-content:space-around ;
    }
  }
}
.conter {
  margin-top: 20px;
}
.block {
  display: flex;
      justify-content:center ;
}
</style>
